<!DOCTYPE html>
<html lang="en" class="app">
<head>
  <meta charset="utf-8" />
  <title>MonsterMusic | Web Application</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="js/jPlayer/jplayer.flat.css" type="text/css" />
  <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="css/animate.css" type="text/css" />
  <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="css/simple-line-icons.css" type="text/css" />
  <link rel="stylesheet" href="css/font.css" type="text/css" />
  <link rel="stylesheet" href="css/app.css" type="text/css" />
  <!--[if lt IE 9]>
  <script src="js/ie/html5shiv.js"></script>
  <script src="js/ie/respond.min.js"></script>
  <script src="js/ie/excanvas.js"></script>
  <![endif]-->
</head>
<style>
  .songlist_item{
    list-style: none;float: left;margin-top: 20px;
  }
  .songlist__cont{
    list-style: none;float: right;margin-right: 70px;font-size: 10px;margin-top: 10px;
  }
  .singer_name:hover{
    color: #1ab667;
  }
  .song_name:hover{
    color: #1ab667;
  }
  .songlist_ul{
    margin: auto 20%;
  }
  .slide_action_left{
    width: 120px;height: 120px;float: left;font-size: 60px; margin-left:200px;margin-top: 200px;
  }
  .slide_action_right{
    width: 120px;height: 120px;float: right;font-size: 60px;margin-top: 200px;margin-right: -20px;
  }
  .mod_slide_action{
    position: absolute;z-index:0;height: 600px;width: 1600px;
    display: none;
  }
  .recommand_songlist{
    text-align:center;font-size: 24px;position:relative;z-index: 0;
  }
  .album_div{
    position:relative;z-index: 0;
  }
  .catagory_title{
    text-align: center;font-size: 30px;font-weight: bolder;margin-bottom: 30px;margin-top: 50px;
  }
  .newsong_recommand ul{
    padding:auto;margin: 0px 350px; position: relative;z-index: 0;
  }
  .newsong_recommand ul li{
  list-style:none;
  }
</style>
<body class="">
<section class="vbox">
  <header class="bg-white-only header header-md navbar navbar-fixed-top-xs">
    <div class="navbar-header aside bg-info nav-xs">
      <a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen,open" data-target="#nav,html">
        <i class="icon-list"></i>
      </a>
      <a href="index.html" class="navbar-brand text-lt">
        <i class="icon-earphones"></i>
        <img src="images/logo.png" alt="." class="hide">
        <span class="hidden-nav-xs m-l-sm">Monster</span>
      </a>
      <a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".user">
        <i class="icon-settings"></i>
      </a>
    </div>      <ul class="nav navbar-nav hidden-xs">
    <li>
      <a href="#nav,.navbar-header" data-toggle="class:nav-xs,nav-xs" class="text-muted">
        <i class="fa fa-indent text"></i>
        <i class="fa fa-dedent text-active"></i>
      </a>
    </li>
  </ul>
    <form class="navbar-form navbar-left input-s-lg m-t m-l-n-xs hidden-xs" role="search">
      <div class="form-group">
        <div class="input-group">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-sm bg-white btn-icon rounded"><i class="fa fa-search"></i></button>
            </span>
          <input type="text" class="form-control input-sm no-border rounded" placeholder="搜索歌手，歌曲...">
        </div>
      </div>
    </form>
    <div class="navbar-right ">
      <ul class="nav navbar-nav m-n hidden-xs nav-user user">
        <li class="hidden-xs">
          <a href="#" class="dropdown-toggle lt" data-toggle="dropdown">
            <i class="icon-bell"></i>
            <span class="badge badge-sm up bg-danger count">2</span>
          </a>
          <section class="dropdown-menu aside-xl animated fadeInUp">
            <section class="panel bg-white">
              <div class="panel-heading b-light bg-light">
                <strong>您有 <span class="count">2</span> 通知</strong>
              </div>
              <div class="list-group list-group-alt">
                <a href="#" class="media list-group-item">
                    <span class="pull-left thumb-sm">
                      <img src="images/a0.png" alt="..." class="img-circle">
                    </span>
                  <span class="media-body block m-b-none">
                      Use awesome animate.css<br>
                      <small class="text-muted">10 分钟之前</small>
                    </span>
                </a>
                <a href="#" class="media list-group-item">
                    <span class="media-body block m-b-none">
                      1.0 首次发表<br>
                      <small class="text-muted">1 小时之前</small>
                    </span>
                </a>
              </div>
              <div class="panel-footer text-sm">
                <a href="#" class="pull-right"><i class="fa fa-cog"></i></a>
                <a href="#notes" data-toggle="class:show animated fadeInRight">查看所有通知</a>
              </div>
            </section>
          </section>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle bg clear" data-toggle="dropdown">
              <span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
                <img src="images/a0.png" alt="...">
              </span>
            John.Smith <b class="caret"></b>
          </a>
          <ul class="dropdown-menu animated fadeInRight">
            <li>
              <span class="arrow top"></span>
              <a href="#">设置</a>
            </li>
            <li>
              <a href="profile.html">个人信息</a>
            </li>
            <li>
              <a href="#">
                <span class="badge bg-danger pull-right">3</span>
                通知
              </a>
            </li>
            <li>
              <a href="docs.html">帮助</a>
            </li>
            <li class="divider"></li>
            <li>
              <a href="modal.lockme.html" data-toggle="ajaxModal" >退出</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </header>
  <section>
    <section class="hbox stretch">
      <!-- .aside -->
      <aside class="bg-black dk nav-xs aside hidden-print" id="nav">
        <section class="vbox">
          <section class="w-f-md scrollable">
            <div class="slim-scroll" data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="10px" data-railOpacity="0.2">



              <!-- nav -->
              <nav class="nav-primary hidden-xs">
                <ul class="nav bg clearfix">
                  <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                    探索
                  </li>
                  <li>
                    <a href="index.html">
                      <i class="icon-disc icon text-success"></i>
                      <span class="font-bold">首页</span>
                    </a>
                  </li>
                  <li>
                    <a href="genres.html">
                      <i class="icon-music-tone-alt icon text-info"></i>
                      <span class="font-bold">歌手</span>
                    </a>
                  </li>
                  <li>
                    <a href="events.html">
                      <i class="icon-drawer icon text-primary-lter"></i>
                      <b class="badge bg-primary pull-right">6</b>
                      <span class="font-bold">专辑</span>
                    </a>
                  </li>
                  <li>
                    <a href="events.html">
                      <i class="icon-drawer icon text-primary-lter"></i>
                      <b class="badge bg-primary pull-right">6</b>
                      <span class="font-bold">分类歌单</span>
                    </a>
                  </li>
                  <li>
                    <a href="listen.html">
                      <i class="icon-list icon  text-info-dker"></i>
                      <span class="font-bold">听歌</span>
                    </a>
                  </li>
                  <li>
                    <a href="video.html" data-target="#content" data-el="#bjax-el" data-replace="true">
                      <i class="icon-social-youtube icon  text-primary"></i>
                      <span class="font-bold">MV</span>
                    </a>
                  </li>
                  <li class="m-b hidden-nav-xs"></li>
                </ul>
                <ul class="nav" data-ride="collapse">
                  <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                    其他
                  </li>
                  <li >
                    <a href="#" class="auto">
                        <span class="pull-right text-muted">
                          <i class="fa fa-angle-left text"></i>
                          <i class="fa fa-angle-down text-active"></i>
                        </span>
                      <i class="icon-grid icon">
                      </i>
                      <span>页面</span>
                    </a>
                    <ul class="nav dk text-sm">
                      <li >
                        <a href="profile.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>个人信息</span>
                        </a>
                      </li>
                      <li >
                        <a href="blog.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>Blog</span>
                        </a>
                      </li>
                      <li >
                        <a href="signin.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>登录</span>
                        </a>
                      </li>
                      <li >
                        <a href="signup.html" class="auto">
                          <i class="fa fa-angle-right text-xs"></i>

                          <span>注册</span>
                        </a>
                      </li>
                    </ul>
                  </li>
                </ul>
                <ul class="nav text-sm">
                  <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                    <span class="pull-right"><a href="#"><i class="icon-plus i-lg"></i></a></span>
                    歌单列表
                  </li>
                  <li>
                    <a href="#">
                      <i class="icon-music-tone icon"></i>
                      <span>Hip-Pop</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="icon-playlist icon text-success-lter"></i>
                      <b class="badge bg-success dker pull-right">9</b>
                      <span>Jazz</span>
                    </a>
                  </li>
                </ul>
              </nav>
              <!-- / nav -->
            </div>
          </section>

          <footer class="footer hidden-xs no-padder text-center-nav-xs">
            <div class="bg hidden-xs ">
              <div class="dropdown dropup wrapper-sm clearfix">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                      <span class="thumb-sm avatar pull-left m-l-xs">                        
                        <img src="images/a3.png" class="dker" alt="...">
                        <i class="on b-black"></i>
                      </span>
                  <span class="hidden-nav-xs clear">
                        <span class="block m-l">
                          <strong class="font-bold text-lt">John.Smith</strong> 
                          <b class="caret"></b>
                        </span>
                        <span class="text-muted text-xs block m-l">Art Director</span>
                      </span>
                </a>
                <ul class="dropdown-menu animated fadeInRight aside text-left">
                  <li>
                    <span class="arrow bottom hidden-nav-xs"></span>
                    <a href="#">Settings</a>
                  </li>
                  <li>
                    <a href="profile.html">Profile</a>
                  </li>
                  <li>
                    <a href="#">
                      <span class="badge bg-danger pull-right">3</span>
                      通知
                    </a>
                  </li>
                  <li>
                    <a href="docs.html">帮助</a>
                  </li>
                  <li class="divider"></li>
                  <li>
                    <a href="modal.lockme.html" data-toggle="ajaxModal" >退出</a>
                  </li>
                </ul>
              </div>
            </div>            </footer>
        </section>
      </aside>
      <!-- /.aside -->
      <section id="content">
        <section class="hbox stretch">
          <section>
            <section class="vbox">
              <section class="scrollable padder-lg w-f-md" id="bjax-target">
                <a href="#" class="pull-right text-muted m-t-lg" data-toggle="class:fa-spin" ><i class="icon-refresh i-lg  inline" id="refresh"></i></a>
                <div style="position: relative;z-index:1;" id="recommand_songlist">
                  <div class="mod_slide_action" id="recommand_songlist_slide">
                    <div class="slide_action_left">
                      <a href="#"><i class="fa fa-arrow-left" ></i></a>
                    </div>
                    <div class="slide_action_right"  >
                      <a href="#" ><i class="fa fa-arrow-right" ></i></a>
                    </div>
                  </div>
                <h2 class="font-thin m-b">MonsterMusic <span class="musicbar animate inline m-l-sm" style="width:20px;height:20px">
                    <span class="bar1 a1 bg-primary lter"></span>
                    <span class="bar2 a2 bg-info lt"></span>
                    <span class="bar3 a3 bg-success"></span>
                    <span class="bar4 a4 bg-warning dk"></span>
                    <span class="bar5 a5 bg-danger dker"></span>
                  </span></h2>
                  <div  class="catagory_title">歌单推荐</div>
                  <div class="recommand_songlist">
                    <a href="#" class="index_tab__item js_tag" data-type="playlist" >为你推荐&nbsp;&nbsp;</a>
                    <a href="javascript:;" class="index_tab__item js_tag" data-type="playlist" >&nbsp;&nbsp;英语&nbsp;&nbsp;</a>
                    <a href="javascript:;" class="index_tab__item js_tag" data-type="playlist" >&nbsp;&nbsp;经典英语&nbsp;&nbsp;</a>
                    <a href="javascript:;" class="index_tab__item js_tag" data-type="playlist" >&nbsp;&nbsp;背景音乐&nbsp;&nbsp;</a>
                    <a href="javascript:;" class="index_tab__item js_tag" data-type="playlist" >&nbsp;&nbsp;影视&nbsp;&nbsp;</a>
                    <a href="javascript:;" class="index_tab__item js_tag" data-type="playlist" >&nbsp;&nbsp;轻音乐</a>
                  </div>
                  <div class="row row-sm" style="margin-left: 20%;margin-right: 10%;margin-top: 20px;">
                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                      <div class="item">
                        <div class="pos-rlt">
                          <div class="bottom">
                            <span class="badge bg-info m-l-sm m-b-sm">03:20</span>
                          </div>
                          <div class="item-overlay opacity r r-2x bg-black">
                            <div class="text-info padder m-t-sm text-sm">
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star-o text-muted"></i>
                            </div>
                            <div class="center text-center m-t-n">
                              <a href="#"><i class="icon-control-play i-2x"></i></a>
                            </div>
                            <div class="bottom padder m-b-sm">
                              <a href="#" class="pull-right">
                                <i class="fa fa-heart-o"></i>
                              </a>
                              <a href="#">
                                <i class="fa fa-plus-circle"></i>
                              </a>
                            </div>
                          </div>
                          <a href="#"><img src="images/p1.jpg" alt="" class="r r-2x img-full"></a>
                        </div>
                        <div class="padder-v">
                          <a href="#" class="text-ellipsis">Tempered Song</a>
                          <a href="#" class="text-ellipsis text-xs text-muted">Miaow</a>
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                      <div class="item">
                        <div class="pos-rlt">
                          <div class="item-overlay opacity r r-2x bg-black active">
                            <div class="text-info padder m-t-sm text-sm">
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star-o text-muted"></i>
                              <i class="fa fa-star-o text-muted"></i>
                            </div>
                            <div class="center text-center m-t-n">
                              <a href="#" data-toggle="class">
                                <i class="icon-control-play i-2x text"></i>
                                <i class="icon-control-pause i-2x text-active"></i>
                              </a>
                            </div>
                            <div class="bottom padder m-b-sm">
                              <a href="#" class="pull-right active" data-toggle="class">
                                <i class="fa fa-heart-o text"></i>
                                <i class="fa fa-heart text-active text-danger"></i>
                              </a>
                              <a href="#" data-toggle="class">
                                <i class="fa fa-plus-circle text"></i>
                                <i class="fa fa-check-circle text-active text-info"></i>
                              </a>
                            </div>
                          </div>
                          <a href="#"><img src="images/p2.jpg" alt="" class="r r-2x img-full"></a>
                        </div>
                        <div class="padder-v">
                          <a href="#" class="text-ellipsis">Vivamus vel tincidunt libero</a>
                          <a href="#" class="text-ellipsis text-xs text-muted">Lauren Taylor</a>
                        </div>
                      </div>
                    </div>
                    <div class="clearfix visible-xs"></div>
                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                      <div class="item">
                        <div class="pos-rlt">
                          <div class="item-overlay opacity r r-2x bg-black">
                            <div class="text-info padder m-t-sm text-sm">
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star-o text-muted"></i>
                            </div>
                            <div class="center text-center m-t-n">
                              <a href="#"><i class="icon-control-play i-2x"></i></a>
                            </div>
                            <div class="bottom padder m-b-sm">
                              <a href="#" class="pull-right">
                                <i class="fa fa-heart-o"></i>
                              </a>
                              <a href="#">
                                <i class="fa fa-plus-circle"></i>
                              </a>
                            </div>
                          </div>
                          <a href="#"><img src="images/p3.jpg" alt="" class="r r-2x img-full"></a>
                        </div>
                        <div class="padder-v">
                          <a href="#" class="text-ellipsis">Morbi id neque quam liquam sollicitudin</a>
                          <a href="#" class="text-ellipsis text-xs text-muted">Allen JH</a>
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                      <div class="item">
                        <div class="pos-rlt">
                          <div class="item-overlay opacity r r-2x bg-black">
                            <div class="text-info padder m-t-sm text-sm">
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star-o text-muted"></i>
                            </div>
                            <div class="center text-center m-t-n">
                              <a href="#"><i class="icon-control-play i-2x"></i></a>
                            </div>
                            <div class="bottom padder m-b-sm">
                              <a href="#" class="pull-right">
                                <i class="fa fa-heart-o"></i>
                              </a>
                              <a href="#">
                                <i class="fa fa-plus-circle"></i>
                              </a>
                            </div>
                          </div>
                          <div class="top">
                            <span class="pull-right m-t-n-xs m-r-sm text-white">
                              <i class="fa fa-bookmark i-lg"></i>
                            </span>
                          </div>
                          <a href="#"><img src="images/p4.jpg" alt="" class="r r-2x img-full"></a>
                        </div>
                        <div class="padder-v">
                          <a href="#" class="text-ellipsis">Tincidunt libero</a>
                          <a href="#" class="text-ellipsis text-xs text-muted">Amanda Conlan</a>
                        </div>
                      </div>
                    </div>
                    <div class="clearfix visible-xs"></div>
                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                      <div class="item">
                        <div class="pos-rlt">
                          <div class="item-overlay opacity r r-2x bg-black">
                            <div class="text-info padder m-t-sm text-sm">
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star-o text-muted"></i>
                            </div>
                            <div class="center text-center m-t-n">
                              <a href="#"><i class="icon-control-play i-2x"></i></a>
                            </div>
                            <div class="bottom padder m-b-sm">
                              <a href="#" class="pull-right">
                                <i class="fa fa-heart-o"></i>
                              </a>
                              <a href="#">
                                <i class="fa fa-plus-circle"></i>
                              </a>
                            </div>
                          </div>
                          <a href="#"><img src="images/p5.jpg" alt="" class="r r-2x img-full"></a>
                        </div>
                        <div class="padder-v">
                          <a href="#" class="text-ellipsis">Fermentum diam</a>
                          <a href="#" class="text-ellipsis text-xs text-muted">Nisa Colen</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="mod_slide_switch js_switch" data-stat="y_new.index.new_song.pager" style="margin-top: 15px;text-align:center;position:relative;z-index:1">
                    <a href="javascript:;" tabindex="-1" data-stat="y_new.index.new_song.pager" data-p="0"><i class="fa fa-circle">&nbsp;&nbsp;</i></a>
                    <a href="javascript:;" tabindex="-1" data-p="1"><i class="fa fa-circle">&nbsp;&nbsp;</i></a>
                    <a href="javascript:;" tabindex="-1" data-p="2"><i class="fa fa-circle">&nbsp;&nbsp;</i></a>
                  </div>
                </div>
                <div >
                  <div class="row" style="position: relative;z-index:1;" id="row_page">
                    <h3 class="catagory_title" >新歌速递</h3>
                    <div class="songlist" >
                      <div style="text-align:center;font-size: 24px;">
                        <a href="javascript:;">为你推荐&nbsp;&nbsp;</a>
                        <a href="javascript:;">内地&nbsp;&nbsp;</a>
                        <a href="javascript:;">&nbsp;&nbsp;港台&nbsp;&nbsp;</a>
                        <a href="javascript:;">&nbsp;&nbsp;欧美&nbsp;&nbsp;</a>
                        <a href="javascript:;">&nbsp;&nbsp;日本&nbsp;&nbsp;</a>
                        <a href="javascript:;">&nbsp;&nbsp;韩国</a>
                      </div>
                      <div class="mod_slide_action" id="slide_page">
                        <div class="slide_action_left">
                          <a href="#"><i class="fa fa-arrow-left" ></i></a>
                        </div>
                        <div class="slide_action_right">
                          <a href="#" ><i class="fa fa-arrow-right" ></i></a>
                        </div>
                      </div>
                      <div class="newsong_recommand">
                        <ul class="songlist_ul">
                          <li class="songlist_item">
                            <div class="songlist__item_box" >
                              <div class="col-xs-6 col-sm-3">
                                <div class="item">
                                  <div class="pos-rlt">
                                    <div class="item-overlay opacity r r-2x bg-black" style="width: 100px;height: 105px">
                                      <div class="center text-center m-t-n">
                                        <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                                      </div>
                                    </div>
                                    <a href="#"><img style="width: 100px;height: 105px" src="images/a0.png" alt="" class="r r-2x img-full"></a>
                                  </div>
                                </div>
                              </div>
                              <div class="songlist__cont">
                                <h5 class="songlist__song">
                                  <a href="#" class="song_name">元气满满</a></h5>
                                <p class="songlist__author">
                                  <a href="#" class="singer_name">冯提莫</a>
                                </p>
                                <div class="songlist__time ">4:01</div>
                              </div >
                            </div>
                          </li>
                          <li class="songlist_item">
                            <div class="songlist__item_box" >
                              <div class="col-xs-6 col-sm-3">
                                <div class="item">
                                  <div class="pos-rlt">
                                    <div class="item-overlay opacity r r-2x bg-black" style="width: 100px;height: 105px">
                                      <div class="center text-center m-t-n">
                                        <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                                      </div>
                                    </div>
                                    <a href="#"><img style="width: 100px;height: 105px" src="images/a1.png" alt="" class="r r-2x img-full"></a>
                                  </div>
                                </div>
                              </div>
                              <div class="songlist__cont">
                                <h5 class="songlist__song">
                                  <a href="#" class="song_name">元气满满</a></h5>
                                <p class="songlist__author">
                                  <a href="#"  class="singer_name">冯提莫</a>
                                </p>
                                <div class="songlist__time ">4:01</div>
                              </div >
                            </div>
                          </li>
                          <li class="songlist_item">
                            <div class="songlist__item_box" >
                              <div class="col-xs-6 col-sm-3">
                                <div class="item">
                                  <div class="pos-rlt">
                                    <div class="item-overlay opacity r r-2x bg-black" style="width: 100px;height: 105px">
                                      <div class="center text-center m-t-n">
                                        <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                                      </div>
                                    </div>
                                    <a href="#"><img style="width: 100px;height: 105px" src="images/a2.png" alt="" class="r r-2x img-full"></a>
                                  </div>
                                </div>
                              </div>
                              <div class="songlist__cont">
                                <h5 class="songlist__song">
                                  <a href="#" class="song_name">元气满满</a></h5>
                                <p class="songlist__author">
                                  <a href="#" class="singer_name">冯提莫</a>
                                </p>
                                <div class="songlist__time c_tx_thin">4:01</div>
                              </div >
                            </div>
                          </li>
                          <li class="songlist_item">
                            <div class="songlist__item_box" >
                              <div class="col-xs-6 col-sm-3">
                                <div class="item">
                                  <div class="pos-rlt">
                                    <div class="item-overlay opacity r r-2x bg-black" style="width: 100px;height: 105px">
                                      <div class="center text-center m-t-n">
                                        <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                                      </div>
                                    </div>
                                    <a href="#"><img style="width: 100px;height: 105px" src="images/m6.jpg" alt="" class="r r-2x img-full"></a>
                                  </div>
                                </div>
                              </div>
                              <div class="songlist__cont">
                                <h5 class="songlist__song">
                                  <a href="#" class="song_name">元气满满</a></h5>
                                <p class="songlist__author">
                                  <a href="#"  class="singer_name">冯提莫</a>
                                </p>
                                <div class="songlist__time">4:01</div>
                              </div >
                            </div>
                          </li>
                          <li class="songlist_item">
                            <div class="songlist__item_box" >
                              <div class="col-xs-6 col-sm-3">
                                <div class="item">
                                  <div class="pos-rlt">
                                    <div class="item-overlay opacity r r-2x bg-black" style="width: 100px;height: 105px">
                                      <div class="center text-center m-t-n">
                                        <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                                      </div>
                                    </div>
                                    <a href="#"><img style="width: 100px;height: 105px" src="images/m5.jpg" alt="" class="r r-2x img-full"></a>
                                  </div>
                                </div>
                              </div>
                              <div class="songlist__cont">
                                <h5 class="songlist__song">
                                  <a href="#"  class="song_name">元气满满</a></h5>
                                <p class="songlist__author">
                                  <a href="#"  class="singer_name">冯提莫</a>
                                </p>
                                <div class="songlist__time">4:01</div>
                              </div >
                            </div>
                          </li>
                          <li class="songlist_item">
                            <div class="songlist__item_box" >
                              <div class="col-xs-6 col-sm-3">
                                <div class="item">
                                  <div class="pos-rlt">
                                    <div class="item-overlay opacity r r-2x bg-black" style="width: 100px;height: 105px">
                                      <div class="center text-center m-t-n">
                                        <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                                      </div>
                                    </div>
                                    <a href="#"><img style="width: 100px;height: 105px" src="images/m3.jpg" alt="" class="r r-2x img-full"></a>
                                  </div>
                                </div>
                              </div>
                              <div class="songlist__cont">
                                <h5 class="songlist__song">
                                  <a href="#" class="song_name">元气满满</a></h5>
                                <p class="songlist__author">
                                  <a href="#" class="singer_name">冯提莫</a>
                                </p>
                                <div class="songlist__time c_tx_thin">4:01</div>
                              </div >
                            </div>
                          </li>
                          <li class="songlist_item">
                            <div class="songlist__item_box" >
                              <div class="col-xs-6 col-sm-3">
                                <div class="item">
                                  <div class="pos-rlt">
                                    <div class="item-overlay opacity r r-2x bg-black" style="width: 100px;height: 105px">
                                      <div class="center text-center m-t-n">
                                        <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                                      </div>
                                    </div>
                                    <a href="#"><img style="width: 100px;height: 105px" src="images/m2.jpg" alt="" class="r r-2x img-full"></a>
                                  </div>
                                </div>
                              </div>
                              <div class="songlist__cont">
                                <h5 class="songlist__song">
                                  <a href="#" class="song_name">元气满满</a></h5>
                                <p class="songlist__author">
                                  <a href="#" class="singer_name">冯提莫</a>
                                </p>
                                <div class="songlist__time">4:01</div>
                              </div >
                            </div>
                          </li>
                          <li class="songlist_item">
                            <div class="songlist__item_box" >
                              <div class="col-xs-6 col-sm-3">
                                <div class="item">
                                  <div class="pos-rlt">
                                    <div class="item-overlay opacity r r-2x bg-black" style="width: 100px;height: 105px">
                                      <div class="center text-center m-t-n">
                                        <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                                      </div>
                                    </div>
                                    <a href="#"><img style="width: 100px;height: 105px" src="images/m1.jpg" alt="" class="r r-2x img-full"></a>
                                  </div>
                                </div>
                              </div>
                              <div class="songlist__cont">
                                <h5 class="songlist__song">
                                  <a href="#" class="song_name">元气满满</a></h5>
                                <p class="songlist__author">
                                  <a href="#" class="singer_name">冯提莫</a>
                                </p>
                                <div class="songlist__time c_tx_thin">4:01</div>
                              </div >
                            </div>
                          </li>
                          <li class="songlist_item">
                            <div class="songlist__item_box" >
                              <div class="col-xs-6 col-sm-3">
                                <div class="item">
                                  <div class="pos-rlt">
                                    <div class="item-overlay opacity r r-2x bg-black" style="width: 100px;height: 105px">
                                      <div class="center text-center m-t-n">
                                        <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                                      </div>
                                    </div>
                                    <a href="#"><img style="width: 100px;height: 105px" src="images/m0.jpg" alt="" class="r r-2x img-full"></a>
                                  </div>
                                </div>
                              </div>
                              <div class="songlist__cont">
                                <h5 class="songlist__song">
                                  <a href="#"  class="song_name">元气满满</a></h5>
                                <p class="songlist__author">
                                  <a href="#" class="singer_name">冯提莫</a>
                                </p>
                                <div class="songlist__time c_tx_thin">4:01</div>
                              </div >
                            </div>
                          </li>
                          <li class="songlist_item">
                            <div class="songlist__item_box" >
                              <div class="col-xs-6 col-sm-3">
                                <div class="item">
                                  <div class="pos-rlt">
                                    <div class="item-overlay opacity r r-2x bg-black" style="width: 100px;height: 105px">
                                      <div class="center text-center m-t-n">
                                        <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                                      </div>
                                    </div>
                                    <a href="#"><img style="width: 100px;height: 105px" src="images/a9.png" alt="" class="r r-2x img-full"></a>
                                  </div>
                                </div>
                              </div>
                              <div class="songlist__cont">
                                <h5 class="songlist__song">
                                  <a href="#" class="song_name">元气满满</a></h5>
                                <p class="songlist__author">
                                  <a href="#" class="singer_name">冯提莫</a>
                                </p>
                                <div class="songlist__time c_tx_thin">4:01</div>
                              </div >
                            </div>
                          </li>
                          <li class="songlist_item">
                            <div class="songlist__item_box" >
                              <div class="col-xs-6 col-sm-3">
                                <div class="item">
                                  <div class="pos-rlt">
                                    <div class="item-overlay opacity r r-2x bg-black" style="width: 100px;height: 105px">
                                      <div class="center text-center m-t-n">
                                        <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                                      </div>
                                    </div>
                                    <a href="#"><img style="width: 100px;height: 105px" src="images/a10.png" alt="" class="r r-2x img-full"></a>
                                  </div>
                                </div>
                              </div>
                              <div class="songlist__cont">
                                <h5 class="songlist__song">
                                  <a href="#" class="song_name">元气满满</a></h5>
                                <p class="songlist__author">
                                  <a href="#" class="singer_name">冯提莫</a>
                                </p>
                                <div class="songlist__time c_tx_thin">4:01</div>
                              </div >
                            </div>
                          </li>
                          <li class="songlist_item">
                            <div class="songlist__item_box" >
                              <div class="col-xs-6 col-sm-3">
                                <div class="item">
                                  <div class="pos-rlt">
                                    <div class="item-overlay opacity r r-2x bg-black" style="width: 100px;height: 105px">
                                      <div class="center text-center m-t-n">
                                        <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                                      </div>
                                    </div>
                                    <a href="#"><img style="width: 100px;height: 105px" src="images/a10.png" alt="" class="r r-2x img-full"></a>
                                  </div>
                                </div>
                              </div>
                              <div class="songlist__cont">
                                <h5 class="songlist__song">
                                  <a href="#"  class="song_name">元气满满</a></h5>
                                <p class="songlist__author">
                                  <a href="#" class="singer_name">冯提莫</a>
                                </p>
                                <div class="songlist__time ">4:01</div>
                              </div >
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="mod_slide_switch js_switch" data-stat="y_new.index.new_song.pager" style="margin-top: 15px;text-align:center;position:relative;z-index:1">
                    <a href="javascript:;" tabindex="-1" data-stat="y_new.index.new_song.pager" data-p="0"><i class="fa fa-circle">&nbsp;&nbsp;</i></a>
                    <a href="javascript:;" tabindex="-1" data-p="1"><i class="fa fa-circle">&nbsp;&nbsp;</i></a>
                    <a href="javascript:;" tabindex="-1" data-p="2"><i class="fa fa-circle">&nbsp;&nbsp;</i></a>
                    <a href="javascript:;" tabindex="-1"  data-p="3"><i class="fa fa-circle">&nbsp;&nbsp;</i></a>
                  </div>
                </div>
                </div>
                </div>
                <div class="album_div" id="album_div">
                <div class="row" >
                  <h3 class="catagory_title">新碟首发</h3>
                  <div class="mod_slide_action" id="album_slide">
                    <div class="slide_action_left">
                      <a href="#"><i class="fa fa-arrow-left" ></i></a>
                    </div>
                    <div class="slide_action_right"  >
                      <a href="#" ><i class="fa fa-arrow-right" ></i></a>
                    </div>
                  </div>
                  <div style="text-align:center;font-size: 24px;position: relative;z-index: 0;">
                    <a href="javascript:;" class="index_tab__item js_tag" data-type="playlist" data-id="3">为你推荐&nbsp;&nbsp;</a>
                    <a href="javascript:;" class="index_tab__item js_tag" data-type="playlist" data-id="3">&nbsp;&nbsp;内地&nbsp;&nbsp;</a>
                    <a href="javascript:;" class="index_tab__item js_tag" data-type="playlist" data-id="3232">&nbsp;&nbsp;港台&nbsp;&nbsp;</a>
                    <a href="javascript:;" class="index_tab__item js_tag" data-type="playlist" data-id="107">&nbsp;&nbsp;欧美&nbsp;&nbsp;</a>
                    <a href="javascript:;" class="index_tab__item js_tag" data-type="playlist" data-id="3201">&nbsp;&nbsp;日本&nbsp;&nbsp;</a>
                    <a href="javascript:;" class="index_tab__item js_tag" data-type="playlist" data-id="49">&nbsp;&nbsp;韩国</a>
                  </div>
                </div>
                <div class="row row-sm" class="row row-sm" style="margin-left: 25%;margin-right: 25%;margin-top: 20px;">
                  <div class="col-xs-6 col-sm-3">
                    <div class="item">
                      <div class="pos-rlt">
                        <div class="item-overlay opacity r r-2x bg-black">
                          <div class="center text-center m-t-n">
                            <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                          </div>
                        </div>
                        <a href="#"><img src="images/a2.png" alt="" class="r r-2x img-full"></a>
                      </div>
                      <div class="padder-v">
                        <a href="#" class="text-ellipsis">Spring rain</a>
                        <a href="#" class="text-ellipsis text-xs text-muted">Miaow</a>
                      </div>
                    </div>
                  </div>
                  <div class="col-xs-6 col-sm-3">
                    <div class="item">
                      <div class="pos-rlt">
                        <div class="item-overlay opacity r r-2x bg-black">
                          <div class="center text-center m-t-n">
                            <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                          </div>
                        </div>
                        <a href="#"><img src="images/a3.png" alt="" class="r r-2x img-full"></a>
                      </div>
                      <div class="padder-v">
                        <a href="#" class="text-ellipsis">Hope</a>
                        <a href="#" class="text-ellipsis text-xs text-muted">Miya</a>
                      </div>
                    </div>
                  </div>
                  <div class="col-xs-6 col-sm-3">
                    <div class="item">
                      <div class="pos-rlt">
                        <div class="item-overlay opacity r r-2x bg-black">
                          <div class="center text-center m-t-n">
                            <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                          </div>
                        </div>
                        <a href="#"><img src="images/a8.png" alt="" class="r r-2x img-full"></a>
                      </div>
                      <div class="padder-v">
                        <a href="#" class="text-ellipsis">Listen wind</a>
                        <a href="#" class="text-ellipsis text-xs text-muted">Soyia Jess</a>
                      </div>
                    </div>
                  </div>
                  <div class="col-xs-6 col-sm-3">
                    <div class="item">
                      <div class="pos-rlt">
                        <div class="item-overlay opacity r r-2x bg-black">
                          <div class="center text-center m-t-n">
                            <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                          </div>
                        </div>
                        <a href="#"><img src="images/a9.png" alt="" class="r r-2x img-full"></a>
                      </div>
                      <div class="padder-v">
                        <a href="#" class="text-ellipsis">Breaking me</a>
                        <a href="#" class="text-ellipsis text-xs text-muted">Pett JA</a>
                      </div>
                    </div>
                  </div>
                  <div class="col-xs-6 col-sm-3">
                    <div class="item">
                      <div class="pos-rlt">
                        <div class="item-overlay opacity r r-2x bg-black">
                          <div class="center text-center m-t-n">
                            <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                          </div>
                        </div>
                        <a href="#"><img src="images/a1.png" alt="" class="r r-2x img-full"></a>
                      </div>
                      <div class="padder-v">
                        <a href="#" class="text-ellipsis">Nothing</a>
                        <a href="#" class="text-ellipsis text-xs text-muted">Willion</a>
                      </div>
                    </div>
                  </div>
                  <div class="col-xs-6 col-sm-3">
                    <div class="item">
                      <div class="pos-rlt">
                        <div class="item-overlay opacity r r-2x bg-black">
                          <div class="center text-center m-t-n">
                            <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                          </div>
                        </div>
                        <a href="#"><img src="images/a6.png" alt="" class="r r-2x img-full"></a>
                      </div>
                      <div class="padder-v">
                        <a href="#" class="text-ellipsis">Panda Style</a>
                        <a href="#" class="text-ellipsis text-xs text-muted">Lionie</a>
                      </div>
                    </div>
                  </div>
                  <div class="col-xs-6 col-sm-3">
                    <div class="item">
                      <div class="pos-rlt">
                        <div class="item-overlay opacity r r-2x bg-black">
                          <div class="center text-center m-t-n">
                            <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                          </div>
                        </div>
                        <a href="#"><img src="images/a7.png" alt="" class="r r-2x img-full"></a>
                      </div>
                      <div class="padder-v">
                        <a href="#" class="text-ellipsis">Hook Me</a>
                        <a href="#" class="text-ellipsis text-xs text-muted">Gossi</a>
                      </div>
                    </div>
                  </div>
                  <div class="col-xs-6 col-sm-3">
                    <div class="item">
                      <div class="pos-rlt">
                        <div class="item-overlay opacity r r-2x bg-black">
                          <div class="center text-center m-t-n">
                            <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                          </div>
                        </div>
                        <a href="#"><img src="images/a5.png" alt="" class="r r-2x img-full"></a>
                      </div>
                      <div class="padder-v">
                        <a href="#" class="text-ellipsis">Tempered Song</a>
                        <a href="#" class="text-ellipsis text-xs text-muted">Miaow</a>
                      </div>
                    </div>
                  </div>
                  <div class="mod_slide_switch js_switch" data-stat="y_new.index.new_song.pager" style="margin-top: 15px;text-align:center;position:relative;z-index:1">
                    <a href="javascript:;" tabindex="-1" data-stat="y_new.index.new_song.pager" data-p="0"><i class="fa fa-circle">&nbsp;&nbsp;</i></a>
                    <a href="javascript:;" tabindex="-1" data-p="1"><i class="fa fa-circle">&nbsp;&nbsp;</i></a>
                    <a href="javascript:;" tabindex="-1" data-p="2"><i class="fa fa-circle">&nbsp;&nbsp;</i></a>
                  </div>
                </div>
                </div>
                </div>
                </div>
                </div>

                <!--<div class="row">
                  <div class="col-md-7">
                    &lt;!&ndash;<div>
                      <h3 class="font-thin">新碟首发</h3>
                      <div class="row row-sm">
                        <div class="col-xs-6 col-sm-3">
                          <div class="item">
                            <div class="pos-rlt">
                              <div class="item-overlay opacity r r-2x bg-black">
                                <div class="center text-center m-t-n">
                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                                </div>
                              </div>
                              <a href="#"><img src="images/a3.png" alt="" class="r r-2x img-full"></a>
                            </div>
                            <div class="padder-v">
                              <a href="#" class="text-ellipsis">Spring rain</a>
                              <a href="#" class="text-ellipsis text-xs text-muted">Miaow</a>
                            </div>
                          </div>
                        </div>
                        <div class="col-xs-6 col-sm-3">
                          <div class="item">
                            <div class="pos-rlt">
                              <div class="item-overlay opacity r r-2x bg-black">
                                <div class="center text-center m-t-n">
                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                                </div>
                              </div>
                              <a href="#"><img src="images/a2.png" alt="" class="r r-2x img-full"></a>
                            </div>
                            <div class="padder-v">
                              <a href="#" class="text-ellipsis">Hope</a>
                              <a href="#" class="text-ellipsis text-xs text-muted">Miya</a>
                            </div>
                          </div>
                        </div>
                        <div class="col-xs-6 col-sm-3">
                          <div class="item">
                            <div class="pos-rlt">
                              <div class="item-overlay opacity r r-2x bg-black">
                                <div class="center text-center m-t-n">
                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                                </div>
                              </div>
                              <a href="#"><img src="images/a8.png" alt="" class="r r-2x img-full"></a>
                            </div>
                            <div class="padder-v">
                              <a href="#" class="text-ellipsis">Listen wind</a>
                              <a href="#" class="text-ellipsis text-xs text-muted">Soyia Jess</a>
                            </div>
                          </div>
                        </div>
                        <div class="col-xs-6 col-sm-3">
                          <div class="item">
                            <div class="pos-rlt">
                              <div class="item-overlay opacity r r-2x bg-black">
                                <div class="center text-center m-t-n">
                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                                </div>
                              </div>
                              <a href="#"><img src="images/a9.png" alt="" class="r r-2x img-full"></a>
                            </div>
                            <div class="padder-v">
                              <a href="#" class="text-ellipsis">Breaking me</a>
                              <a href="#" class="text-ellipsis text-xs text-muted">Pett JA</a>
                            </div>
                          </div>
                        </div>
                        <div class="col-xs-6 col-sm-3">
                          <div class="item">
                            <div class="pos-rlt">
                              <div class="item-overlay opacity r r-2x bg-black">
                                <div class="center text-center m-t-n">
                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                                </div>
                              </div>
                              <a href="#"><img src="images/a1.png" alt="" class="r r-2x img-full"></a>
                            </div>
                            <div class="padder-v">
                              <a href="#" class="text-ellipsis">Nothing</a>
                              <a href="#" class="text-ellipsis text-xs text-muted">Willion</a>
                            </div>
                          </div>
                        </div>
                        <div class="col-xs-6 col-sm-3">
                          <div class="item">
                            <div class="pos-rlt">
                              <div class="item-overlay opacity r r-2x bg-black">
                                <div class="center text-center m-t-n">
                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                                </div>
                              </div>
                              <a href="#"><img src="images/a6.png" alt="" class="r r-2x img-full"></a>
                            </div>
                            <div class="padder-v">
                              <a href="#" class="text-ellipsis">Panda Style</a>
                              <a href="#" class="text-ellipsis text-xs text-muted">Lionie</a>
                            </div>
                          </div>
                        </div>
                        <div class="col-xs-6 col-sm-3">
                          <div class="item">
                            <div class="pos-rlt">
                              <div class="item-overlay opacity r r-2x bg-black">
                                <div class="center text-center m-t-n">
                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                                </div>
                              </div>
                              <a href="#"><img src="images/a7.png" alt="" class="r r-2x img-full"></a>
                            </div>
                            <div class="padder-v">
                              <a href="#" class="text-ellipsis">Hook Me</a>
                              <a href="#" class="text-ellipsis text-xs text-muted">Gossi</a>
                            </div>
                          </div>
                        </div>
                        <div class="col-xs-6 col-sm-3">
                          <div class="item">
                            <div class="pos-rlt">
                              <div class="item-overlay opacity r r-2x bg-black">
                                <div class="center text-center m-t-n">
                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
                                </div>
                              </div>
                              <a href="#"><img src="images/a5.png" alt="" class="r r-2x img-full"></a>
                            </div>
                            <div class="padder-v">
                              <a href="#" class="text-ellipsis">Tempered Song</a>
                              <a href="#" class="text-ellipsis text-xs text-muted">Miaow</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>&ndash;&gt;
                  <div class="col-md-5">
                    <h3 class="font-thin">排行榜</h3>
                    <div class="list-group bg-white list-group-lg no-bg auto">
                      <a href="#" class="list-group-item clearfix">
                        <span class="pull-right h2 text-muted m-l">1</span>
                        <span class="pull-left thumb-sm avatar m-r">
                            <img src="images/a4.png" alt="...">
                          </span>
                        <span class="clear">
                            <span>Little Town</span>
                            <small class="text-muted clear text-ellipsis">by Chris Fox</small>
                          </span>
                      </a>
                      <a href="#" class="list-group-item clearfix">
                        <span class="pull-right h2 text-muted m-l">2</span>
                        <span class="pull-left thumb-sm avatar m-r">
                            <img src="images/a5.png" alt="...">
                          </span>
                        <span class="clear">
                            <span>Lementum ligula vitae</span>
                            <small class="text-muted clear text-ellipsis">by Amanda Conlan</small>
                          </span>
                      </a>
                      <a href="#" class="list-group-item clearfix">
                        <span class="pull-right h2 text-muted m-l">3</span>
                        <span class="pull-left thumb-sm avatar m-r">
                            <img src="images/a6.png" alt="...">
                          </span>
                        <span class="clear">
                            <span>Aliquam sollicitudin venenatis</span>
                            <small class="text-muted clear text-ellipsis">by Dan Doorack</small>
                          </span>
                      </a>
                      <a href="#" class="list-group-item clearfix">
                        <span class="pull-right h2 text-muted m-l">4</span>
                        <span class="pull-left thumb-sm avatar m-r">
                            <img src="images/a7.png" alt="...">
                          </span>
                        <span class="clear">
                            <span>Aliquam sollicitudin venenatis ipsum</span>
                            <small class="text-muted clear text-ellipsis">by Lauren Taylor</small>
                          </span>
                      </a>
                      <a href="#" class="list-group-item clearfix">
                        <span class="pull-right h2 text-muted m-l">5</span>
                        <span class="pull-left thumb-sm avatar m-r">
                            <img src="images/a8.png" alt="...">
                          </span>
                        <span class="clear">
                            <span>Vestibulum ullamcorper</span>
                            <small class="text-muted clear text-ellipsis">by Dan Doorack</small>
                          </span>
                      </a>
                    </div>
                  </div>
                </div>
                <div class="row m-t-lg m-b-lg">
                  <div class="col-sm-6">
                    <div class="bg-primary wrapper-md r">
                      <a href="#">
                        <span class="h4 m-b-xs block"><i class=" icon-user-follow i-lg"></i> 登录/注册帐号</span>
                        <span class="text-muted">Save and share your playlist with your friends when you log in or create an account.</span>
                      </a>
                    </div>
                  </div>
                </div>
                </div>
              </section>
              <footer class="footer bg-dark">
                <div id="jp_container_N">
                  <div class="jp-type-playlist">
                    <div id="jplayer_N" class="jp-jplayer hide"></div>
                    <div class="jp-gui">
                      <div class="jp-video-play hide">
                        <a class="jp-video-play-icon">play</a>
                      </div>
                      <div class="jp-interface">
                        <div class="jp-controls">
                          <div><a class="jp-previous"><i class="icon-control-rewind i-lg"></i></a></div>
                          <div>
                            <a class="jp-play"><i class="icon-control-play i-2x"></i></a>
                            <a class="jp-pause hid"><i class="icon-control-pause i-2x"></i></a>
                          </div>
                          <div><a class="jp-next"><i class="icon-control-forward i-lg"></i></a></div>
                          <div class="hide"><a class="jp-stop"><i class="fa fa-stop"></i></a></div>
                          <div><a class="" data-toggle="dropdown" data-target="#playlist"><i class="icon-list"></i></a></div>
                          <div class="jp-progress hidden-xs">
                            <div class="jp-seek-bar dk">
                              <div class="jp-play-bar bg-info">
                              </div>
                              <div class="jp-title text-lt">
                                <ul>
                                  <li></li>
                                </ul>
                              </div>
                            </div>
                          </div>
                          <div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
                          <div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
                          <div class="hidden-xs hidden-sm">
                            <a class="jp-mute" title="mute"><i class="icon-volume-2"></i></a>
                            <a class="jp-unmute hid" title="unmute"><i class="icon-volume-off"></i></a>
                          </div>
                          <div class="hidden-xs hidden-sm jp-volume">
                            <div class="jp-volume-bar dk">
                              <div class="jp-volume-bar-value lter"></div>
                            </div>
                          </div>
                          <div>
                            <a class="jp-shuffle" title="shuffle"><i class="icon-shuffle text-muted"></i></a>
                            <a class="jp-shuffle-off hid" title="shuffle off"><i class="icon-shuffle text-lt"></i></a>
                          </div>
                          <div>
                            <a class="jp-repeat" title="repeat"><i class="icon-loop text-muted"></i></a>
                            <a class="jp-repeat-off hid" title="repeat off"><i class="icon-loop text-lt"></i></a>
                          </div>
                          <div class="hide">
                            <a class="jp-full-screen" title="full screen"><i class="fa fa-expand"></i></a>
                            <a class="jp-restore-screen" title="restore screen"><i class="fa fa-compress text-lt"></i></a>
                          </div>
                        </div>
                      </div>
                    </div>-->
                    <div class="jp-playlist dropup" id="playlist">
                      <ul class="dropdown-menu aside-xl dker">
                        <!-- The method Playlist.displayPlaylist() uses this unordered list -->
                        <li class="list-group-item"></li>
                      </ul>
                    </div>
                    <div class="jp-no-solution hide">
                      <span>Update Required</span>
                      To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                    </div>
                  </div>
                </div>
              </footer>
              </section>
            </section>
          </section>
        </section>
        <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
      </section>
    </section>
  </section>
</section>
<script src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.js"></script>
<!-- App -->
<script src="js/app.js"></script>
<script src="js/slimscroll/jquery.slimscroll.min.js"></script>
<script src="js/app.plugin.js"></script>
<script type="text/javascript" src="js/jPlayer/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jPlayer/add-on/jplayer.playlist.min.js"></script>
<script type="text/javascript" src="js/jPlayer/demo.js"></script>
<script>
    window.onload = function(){
        var rs = document.getElementById("recommand_songlist");
        var rss = document.getElementById("recommand_songlist_slide");
        rs.onmouseover = function(){
            rss.style.display = "block";
        };
        rs.onmouseout = function(){
            rss.style.display = "none";
        };

        var ms = document.getElementById("row_page");
        var add = document.getElementById("slide_page");
        ms.onmouseover = function(){
            add.style.display = "block";
        };
        ms.onmouseout = function(){
            add.style.display = "none";
        };

        var ad = document.getElementById("album_div");
        var as = document.getElementById("album_slide");
        ad.onmouseover = function(){
            as.style.display = "block";
        };
        ad.onmouseout = function(){
            as.style.display = "none";
        };
    };
</script>
</body>
</html>